<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>v-for</title>
	<!-- <script src="https://unpkg.com/vue@next"></script> -->
	<script src="js/vue.global.js"></script>
	<link rel="stylesheet" href="css/com.css">
</head>
<body>
	
<div id="app" class="">
	<p>课程列表：</p>
	<ul>
		<li v-for="(val, key) in courses">{{key}}、{{val}}</li>
	</ul>
	<p>商品列表：</p>
	<ul>
		<li v-for="(product, key, index) in products" :key="'a'">
			<span>{{key}} -- {{index}} 、 {{product.name}} ：{{product.price}}</span>
		</li>
	</ul>
</div>

</body>
<script>
const HelloVueApp = {
	data() {
		return {
			courses: ['html', 'css', 'js', 'php', 'java'],
			products: [
				{name:'手机', price: 2000},
				{name:'衣服', price: 500},
				{name:'电脑', price: 5000},
			]
		}
	},
	
}
var vm = Vue.createApp(HelloVueApp).mount('#app');
</script>

</html>